<template>
	<view class="content">
		<u-navbar title="活动详情" :autoBack="true">
		</u-navbar>
		<view style="position: absolute;z-index: -1;top: 0;">
			<u-count-down :time="this.minutes * 1000" @change="onChange"></u-count-down>
		</view>
		<view class="container">
			<view class="detail">

				<image class="s1" v-if="info.share_image"
					:src="info.share_image.startsWith('http')?info.share_image: conf.preview_url+info.share_image"
					mode="aspectFill"></image>

				<view class="temp" >
					<view class="temp0" v-if="info.templateid===0">
						<image class="img" :src="conf.preview_url+info.template_custom_image" mode="aspectFill"></image>

						<view class="clock">
							<view class="aaaa">
								<view class="clock-item" style="position: relative;">
									<view v-if="minutes !=0" class="dddd">
										<view style="padding-right: 20rpx;">距离活动结束时间</view>
										<!-- <view class="cccc">{{timeData.days}}</view>
										天 -->
										<view class="cccc">
											{{timeData.days==0? timeData.hours:timeData.days*24+timeData.hours}}
										</view> 时
										<view class="cccc">
											{{ timeData.minutes }}
										</view> 分<view class="cccc">{{ timeData.seconds }}</view> 秒
									</view>
									<view v-else style="padding-left: 24rpx;margin:0 auto;">
										活动已结束
									</view>
									<image src="@/static/clock.png" class="clock-img"></image>
								</view>
							</view>
						</view>

					</view>
					<view class="temp1" v-if="info.templateid==2">
						<image class="img" src="../../static/temp1.png" mode=""></image>
						<text>{{info.title}}</text>
						<view class="clock">
							<view v-if="minutes!=0">
								距离活动结束时间：{{timeData.days}}天{{ timeData.hours}}时{{ timeData.minutes }}分{{ timeData.seconds }}秒
							</view>
							<view style="font-size: 32rpx;" v-else>
								活动已结束
							</view>
						</view>
					</view>
					<view class="temp2" v-if="info.templateid==1">
						<image class="img" src="../../static/temp2.png" mode=""></image>
						<text>{{info.title}}</text>
						<view class="clock">
							<template v-if="minutes!=0">
								<view>距离活动结束时间：</view>
								<view>
									{{timeData.days}}天{{ timeData.hours}}时{{ timeData.minutes }}分{{ timeData.seconds }}秒
								</view>
							</template>
							<view style="font-size: 32rpx;" v-else>
								活动已结束
							</view>
						</view>
					</view>
					<view class="temp3" v-if="info.templateid==4">
						<image class="img" src="../../static/temp3.png" mode=""></image>
						<text>{{info.title}}</text>
						<view class="clock">
							<view v-if="minutes!=0">
								距离活动结束时间：{{timeData.days}}天{{ timeData.hours}}时{{ timeData.minutes }}分{{ timeData.seconds }}秒
							</view>
							<view style="font-size: 32rpx;" v-else>
								活动已结束
							</view>
						</view>
					</view>
					<view class="temp4" v-if="info.templateid==3">
						<image class="img" src="../../static/temp4.png" mode=""></image>
						<text>{{info.title}}</text>
						<view class="clock">
							<view v-if="minutes!=0">
								距离活动结束时间：{{timeData.days}}天{{ timeData.hours}}时{{ timeData.minutes }}分{{ timeData.seconds }}秒
							</view>
							<view style="font-size: 32rpx;" v-else>
								活动已结束
							</view>
						</view>
					</view>
				</view>
				<view v-if="info.templateid===0" style="margin: 20rpx 0;">
					<text class="" style="font-size: 34rpx;font-weight: bold;">{{info.title}}</text>
				</view>
				<view class="list" v-if="info.content_node">
					<view class="item" v-for="item,index in JSON.parse(info.content_node)||[]" :key="index">
						<view class="left">
							<view class="txt" v-if="item.type=='text'">{{item.value}}</view>

							<!-- <u--image radius="16rpx" :showLoading="true" v-else :src="item.value" width="100%"  
								 ></u--image> -->
							<image :src="item.value" v-else mode="widthFix" style="border-radius: 16rpx;width: 100%;"
								lazy-load></image>
						</view>
					</view>
				</view>

				<view class="content-images" v-if="info.content_images_text.length">
					<image :src="v.url" v-for="(v, i) in info.content_images_text" :key='i' mode="widthFix"></image>
				</view>
			</view>

			<!-- <view class="but">
			    <view>
			        <u-button class="s1" disabled>生成分享海报</u-button>
			    </view>
			    
			    <view>
			        <u-button class="s2" disabled>立即购买({{ info.money }}元)</u-button>
			    </view>
			</view> -->

			<view class="but-tab" v-if="info.musicfile != ''">
				<image class="song-play-image song-play-animation" :class="{'song-play-animation-paused': !isPlay}"
					@click="clickPlay()" src="@/static/icon/yy.png"></image>
			</view>

		</view>
	</view>
</template>

<script>
	import conf from '@/common/config.js'
	const innerAudioContext = uni.createInnerAudioContext();

	function compareTime(inputTime) {
		// 获取当前时间的时间戳（毫秒）
		var currentTime = new Date().getTime();

		// 将传入的时间字符串转换为时间戳（毫秒）
		var inputTimestamp = new Date(inputTime).getTime();
		console.log(inputTimestamp > currentTime);
		// 如果传入的时间晚于当前时间，则返回"已结束"
		if (currentTime > inputTimestamp) {
			return "0";
		}

		// 计算时间差（毫秒）
		var difference = inputTimestamp - currentTime;

		// 将时间差转换为秒数
		var differenceInSeconds = Math.floor(difference / 1000);

		return differenceInSeconds;
	}
	export default {
		data() {
			return {
				conf,
				id: 0,
				temp_id: 0,
				info: uni.getStorageSync('preview') || {},
				// 是否播放标识
				isPlay: true,
				minutes: 0,
				timeData: {

				}
			};
		},
		onLoad(options) {
			// console.log(conf.preview_url);
			this.minutes = Math.abs(compareTime(this.info.end_time))
			console.log(this.minutes, 'this.minutes');
		},
		onShow() {
			// this.getInfo();
			// 初始自动播放音频
			innerAudioContext.autoplay = true
			// 是否循环播放
			innerAudioContext.loop = true
			// 存入音频路径
			innerAudioContext.src = conf.preview_url + this.info.musicfile;
			this.onVoError();
		},
		onUnload() {
			console.log('停止播放onUnload')
			this.isPlay = false;
			innerAudioContext.stop();
		},
		onHide() {
			console.log('停止播放onHide')
			this.isPlay = false;
			innerAudioContext.stop();
		},
		methods: {
			onChange(e) {
				this.timeData = e
			},
			getInfo() {
				this.$API.getActivity({
					id: this.id
				}).then(res => {
					this.info = res.data;
					if (res.data.title != '') {
						uni.setNavigationBarTitle({
							title: res.data.title
						})
					} else {
						uni.setNavigationBarTitle({
							title: res.data.title
						})
					}
					if (res.data.musicfile != '') {
						// 初始自动播放音频
						innerAudioContext.autoplay = true
						// 是否循环播放
						innerAudioContext.loop = true
						// 存入音频路径
						innerAudioContext.src = res.data.musicfile_url;
						this.onVoError();
					} else {
						this.isPlay = false;
					}
				})
			},
			// 监控错误
			onVoError() {
				innerAudioContext.onError((res) => {
					this.isPlay = false
					console.log(res)
				});
			},
			// 点击播放/暂停按钮
			clickPlay() {
				if (this.isPlay) {
					this.onPause()
				} else {

					this.onPlay()
				}
			},
			// 监听播放
			onPlay() {
				innerAudioContext.play();
				innerAudioContext.onPlay((res) => {
					this.isPlay = true;
					console.log('开始播放');
				})
			},
			// 监听暂停
			onPause() {
				innerAudioContext.pause();
				innerAudioContext.onPause((res) => {
					this.isPlay = false;
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	.content {
		flex: 1;
		margin: 0 0 52rpx;
		// padding-bottom: 200rpx;
		display: flex;
		flex-direction: column;

		.container {
			flex: 1;
			background-color: #fff;
		}
	}

	.detail {
		padding: 52rpx 40rpx;
		flex: 1;

		// border-radius: 48rpx;
		padding-top: 52rpx;
		@include flex(column);

		.s1 {
			height: 196rpx;
			border-radius: 16rpx;
			width: 100%;
		}

		.title {
			height: 36rpx;
			font-size: 36rpx;
			font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
			font-weight: 600;
			color: #110202;
			line-height: 36rpx;
			margin-top: 40rpx;
		}

		.time,
		.address {
			height: 28rpx;
			font-size: 28rpx;
			font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
			font-weight: 400;
			color: #110202;
			line-height: 28rpx;
			margin-top: 16rpx;
		}

		.content-images {
			@include flex(column);
			margin-top: 40rpx;

			image {
				width: 100%;
			}
		}
	}

	.popup_image {
		width: 622rpx;
		height: 1062rpx;
		position: relative;

		.back {
			position: absolute;
			width: 622rpx;
			height: 1002rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			opacity: 1;
			top: 60rpx;
		}

		image {
			position: absolute;
			width: 598rpx;
			height: 798rpx;
			background: linear-gradient(180deg, rgba(30, 26, 26, 0) 0%, #241F1F 100%);
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			opacity: 1;
			top: 72rpx;
			left: 12rpx;
		}

		.close {
			width: 40rpx;
			height: 40rpx;
			opacity: 1;
			position: absolute;
			right: 4rpx;
			top: 0;
			text-align: center;
			line-height: 40rpx;
			border-radius: 50%;
			font-size: 26rpx;
		}

		.button {
			width: 290rpx;
			height: 96rpx;
			position: absolute;
			left: 166rpx;
			bottom: 56rpx;

			button {
				width: 290rpx;
				height: 96rpx;
				background: #7677EB;
				box-shadow: 0rpx 12rpx 24rpx 0rpx rgba(63, 140, 255, 0.2637);
				border-radius: 28rpx 28rpx 28rpx 28rpx;
				opacity: 1;
				color: #fff;
				font-size: 30rpx;
				line-height: 96rpx;
			}
		}
	}

	.but {
		width: 100%;
		@include flex;
		justify-content: center;
		position: fixed;
		bottom: 20rpx;
		left: 0;

		.s1 {
			width: 290rpx;
			height: 96rpx;
			margin-right: 80rpx;
			background: #fff;
			box-shadow: 0 12rpx 24rpx 0 rgba(63, 140, 255, 0.2637);
			border-radius: 28rpx;
			text-align: center;
			border: 2rpx solid #7677EB;

			text {
				font-size: 30rpx;
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: 400;
				color: #7677EB;
				line-height: 96rpx;
			}
		}

		.s2 {
			width: 290rpx;
			height: 96rpx;
			background: #7677EB;
			box-shadow: 0 12rpx 24rpx 0 rgba(63, 140, 255, 0.2637);
			border-radius: 28rpx;
			text-align: center;
			border: 2rpx solid #7677EB;

			text {
				font-size: 30rpx;
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 96rpx;
			}
		}
	}

	.but-tab {
		position: fixed;
		right: 5rpx;
		top: 118rpx;
		width: 84rpx;
		@include flex(column);

		image {
			width: 84rpx;
			height: 84rpx;
			margin-top: 20rpx;
		}
	}

	/* 图片旋转动画 */
	@keyframes image-trans {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}

	@media (prefers-reduced-motion: no-preference) {
		.song-play-animation {
			animation: image-trans infinite 10s linear;
		}
	}

	/* 音频暂停时，图片暂停旋转 */
	.song-play-animation-paused {
		animation-play-state: paused;
	}

	.avatars {
		display: flex;
		flex-direction: column;
		width: 566rpx;
		margin: 0 auto;

		.title {
			height: 42rpx;
			font-size: 28rpx;
			font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
			font-weight: 400;
			color: #110202;
			line-height: 42rpx;
		}

		.avatar {
			display: flex;
			align-items: center;
			margin-top: 40rpx;

			image {
				margin-right: -16rpx;
				width: 64rpx;
				height: 64rpx;
				background-color: #ccc;
				border-radius: 50%;
				color: white;
				display: flex;
				justify-content: center;
				align-items: center;
				border: 2rpx solid #fff;
			}
		}
	}

	.temp {
		margin: 40rpx 0;
		box-sizing: border-box;

		.img {
			width: 100%;
			height: 480rpx
		}


		.temp0 {
			position: relative;
			margin: 0 -44rpx;

			text {
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: 400;
				font-size: 37rpx;
				color: #000000;
				line-height: 44rpx;
				position: absolute;
				top: 30rpx;
				left: 50%;
				transform: translate(-50%, 30rpx) rotate(8deg);
			}

			.aaaa {
				display: flex;
				justify-content: flex-end;
				width: 100%;
			}

			.clock-img {
				width: 130rpx;
				height: 130rpx;
				position: absolute;
				top: -100rpx;
				transform: translateY(70rpx);
				left: -70rpx;
			}

			.dddd {
				display: flex;
				align-items: center;
			}

			.cccc {
				min-width: 42rpx;
				height: 48rpx;
				padding: 0 4rpx;
				line-height: 48rpx;
				background: #F42835;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: 1000;
				font-size: 32rpx;
				color: #FFFFFF;
				text-align: center;
				margin: 0 8rpx;
			}

			.clock-item {
				margin-right: 46rpx;
				padding-right: 32rpx;
				display: flex;
				align-items: center;
				width: 582rpx;
				height: 80rpx;
				background: linear-gradient(270deg, #FFECDA 0%, rgba(255, 236, 218, 0.8) 100%);
				border-radius: 0rpx 480rpx 480rpx 0rpx;
				border: 2rpx solid #F42835;
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: 600;
				font-size: 28rpx;
				color: #FF404A;
				justify-content: flex-end;
			}

			.clock {
				position: absolute;
				padding: 0 20rpx;
				width: 100%;
				height: 80rpx;

				border-radius: 2938rpx 2938rpx 2938rpx 2938rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				// background: #00000094;
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 50rpx;
				text-align: center;
				left: 50%;
				bottom: 34rpx;
				transform: translate(-50%, 0);
			}
		}

		.temp1 {
			position: relative;
			border: 2rpx dashed #bfbfbf;

			text {
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: 400;
				font-size: 37rpx;
				color: #000000;
				line-height: 44rpx;
				position: absolute;
				top: 32%;
				left: 50%;
				transform: translate(-50%, -32%) rotate(8deg);
			}

			.clock {
				padding: 0 10rpx;
				position: absolute;
				width: 406rpx;
				height: 60rpx;
				line-height: 60rpx;
				border-radius: 2248rpx 2248rpx 2248rpx 2248rpx;
				border: 2rpx dashed #D09900;
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: 400;
				font-size: 23rpx;
				color: #5E5E5E;
				text-align: center;
				left: 50%;
				bottom: 58rpx;
				transform: translate(-50%, 0);
			}
		}

		.temp2 {
			position: relative;

			text {
				width: 260rpx;
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: 700;
				font-size: 40rpx;
				color: #000000;
				line-height: 44rpx;
				position: absolute;
				top: 56rpx;
				left: 50%;
				transform: translate(-50%, 0);
			}

			.clock {
				position: absolute;
				height: 128rpx;
				padding: 0 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				background: #262626;
				font-weight: 400;
				font-size: 30rpx;
				color: #FFFFFF;
				line-height: 50rpx;
				text-align: center;
				left: 50%;
				bottom: 34rpx;
				transform: translate(-50%, 0);
			}
		}
	}

	.temp3 {
		position: relative;

		text {
			width: 474rpx;
			font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
			font-weight: 700;
			font-size: 48rpx;
			color: #000000;
			text-align: center;
			position: absolute;
			top: 132rpx;
			left: 50%;
			transform: translate(-50%, -32%) rotate(-8deg);
		}

		.clock {
			position: absolute;
			padding: 0 10rpx;
			width: 504rpx;
			height: 78rpx;
			background: #2E2E2E;
			border-radius: 2938rpx 2938rpx 2938rpx 2938rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			background: #262626;
			font-weight: 500;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 50rpx;
			text-align: center;
			left: 50%;
			bottom: 34rpx;
			transform: translate(-50%, 0);
		}
	}

	.temp4 {
		position: relative;

		text {
			width: 540rpx;
			font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
			font-weight: 700;
			font-size: 48rpx;
			color: #000000;
			text-align: center;
			position: absolute;
			top: 120rpx;
			left: 50%;
			transform: translate(-50%, 0);
		}


		.clock {
			position: absolute;
			width: 504rpx;
			padding: 0 10rpx;
			height: 78rpx;
			background: #FFD175;
			box-shadow: 0rpx 6rpx 0rpx 0rpx #4C4C4C;
			border-radius: 2938rpx 2938rpx 2938rpx 2938rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			font-weight: 500;
			font-size: 28rpx;
			color: #2B2B2B;
			line-height: 50rpx;
			text-align: center;
			left: 50%;
			bottom: 74rpx;
			transform: translate(-50%, 0);
		}
	}

	.list {
		@include flex(column);
		padding-bottom: 36rpx;

		.item {
			background-color: #FFF;
			border-radius: 48rpx;
			margin-bottom: 40rpx;

			.txt {
				white-space: pre-wrap;
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: 400;
				font-size: 28rpx;
				color: #7D8592;
				line-height: 45rpx;
			}
		}
	}
</style>